<template>
	<div class="add">
		<div class="form-con">
			<el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="标题" prop="title">
			    <el-input style="width: 400px;" v-model="ruleForm.title" placeholder="请输入内容"></el-input> 0/40
			  </el-form-item>
			  <el-form-item label="描述" prop="description">
		    	<el-input
				  style="width: 400px;"
				  type="textarea"
				  :autosize="{ minRows: 2, maxRows: 4}"
				  placeholder="请输入内容"
				  v-model="ruleForm.description">
				</el-input> 0/120
			  </el-form-item>			  
			  <el-form-item label="选择分组">
	    		<el-select v-model="ruleForm.value" placeholder="请选择" style="width: 150px;">
				    <el-option
				      v-for="item in group"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			  	</el-select>
			  	<el-popover
					  placement="bottom"
					  title="分组名称"
					  width="200"
					  v-model="showAdd"
					  trigger="click">
					  <el-input size="mini" v-model="groupName" placeholder="请输入分组名" style="margin-bottom: 8px;"></el-input>
					  <el-button size="mini" type="primary" @click="createGroup">确定</el-button>
					  <el-button size="mini" @click="showAdd = false">取消</el-button>
					  <el-button slot="reference" icon="el-icon-plus">新建分组</el-button>
				</el-popover>
 			  	

			  </el-form-item>
			  <el-form-item label="封面" prop="pass">
			    <el-input style="width: 400px;" v-model="cover" placeholder="请输入图片地址"></el-input>
				<input type="file" accept="image/*" @change="onFileChange" style="display:none;" id="upfile">
				<el-button size="small" type="primary" @click="autoClick">从本机选择</el-button>	
			  </el-form-item>				  
			  <el-form-item label="视频" prop="pass">
			    <el-input style="width: 400px;" v-model="video" placeholder="请输入视频地址"></el-input>
				<input type="file" accept="video/*" @change="onFileChange1" style="display:none;" id="video">
				<el-button :loading="upLoading" size="small" type="primary" @click="autoClick('video')">{{loadingText}}</el-button>	
			  </el-form-item>			  		  
			  <el-form-item label="音频" prop="pass">
			     <el-input style="width: 400px;" v-model="voice" placeholder="请输入音频地址"></el-input>
				 <input type="file" accept="audio/*" @change="onFileChange2" style="display:none;" id="audio">
				 <el-button :loading="upLoading1" size="small" type="primary" @click="autoClick('audio')">{{loadingText1}}</el-button>	
			  </el-form-item>			  
			  <el-form-item label="正文" prop="content">
			    <quill-editor 
		      		v-model="ruleForm.content" 
		      		ref="myQuillEditor" 
		   		>
		    	</quill-editor>	
			  </el-form-item>				  
			  <el-form-item>
			  	<el-button size="small" type="primary" @click="submitVal('ruleForm')">保存</el-button>
				<el-button size="small" >预览</el-button>
			  </el-form-item>			  
			</el-form>		
		</div>
	</div>
</template>
<script>
	import { getCookie } from '../../../../assets/js/cookie.js'
	import axios from 'axios'
	export default{
		name : 'addArticle',
		data(){
			return{
				ruleForm  : {
					title 	 : '',
					description :'',
					content  : ''
				},
				cover	 :'',
				video    : '',
				voice    : '',
				options  : [],
				groupList : [],
				rules     : {
					title : [
						{required: true, message: '请输入名称', trigger: 'blur'},
						{min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }
					],
					description : [
						{required: true, message: '请输入详情描述', trigger: 'blur'},
						{min: 0, max: 40, message: '长度在 0 到 120 个字符', trigger: 'blur' }
					],
					// value    : [
					// 	{required: true, message: '请选择分组', trigger: 'blur'},
					// ],
					content  : [
						{required: true, message: '请输入正文', trigger: 'blur'},
					]
				},
				coverMD5 : '',
				videoMd5 : '',
				voiceMd5 : '',
				upLoading : false,
				upLoading1: false,
				loadingText : '从本机选择',
				loadingText1: '从本机选择',
				showAdd     : false,
				groupName   : ''

			}
		},
		props:['data'],
		mounted(){
			this.uid     = getCookie('UID')
			this.token   = getCookie('TOKEN')
			this.shop_id = this.data.id
			this.getGroup()
		},
		methods:{
			submitVal(formName){
				let info = Object.assign(this.ruleForm,{
					md5 		   : this.coverMD5,
					video_md5 	   : this.videoMd5,
					voice_file_md5 : this.voiceMd5
				})
				delete info.value
				let url  = '/platform/read/add.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id
				this.$refs[formName].validate((valid) => {
					if(valid){
						this.$axiosPost(url,info,true).then( res => {
							if(res.code === 200){
								this.$message({message:'添加成功',type:'success'})
							}
							if(res.code === 404){
								this.$message({message:'添加失败',type:'error'})
							}
						})
					}
				})

			},
			autoClick(type){
				if(type === 'video'){
					document.getElementById('video').click()
				}else if(type === 'audio'){
					document.getElementById('audio').click()
				}else{
					document.getElementById('upfile').click()
				}
				
			},
			onFileChange($event){
				let _this   = this
				let file = $event.target.files[0]
				var reader = new FileReader();	
					reader.onload = function(e){
					   let url = `/utils/files/uploadbase64.json?uid=${_this.uid}&token=${_this.token}`
						_this.$axiosPost(url,{
							upload : e.target.result
						},true).then( res => {
							if(res.code === 200){
								_this.cover    = res.data.path
								_this.coverMD5 = res.data.md5
							}
						})
					}
					reader.readAsDataURL(file);
			},
			onFileChange1($event){
				this.loadingText = '上传中...'
				this.upLoading = true
				this.fileUpload($event, data =>{
					this.loadingText = '从本机选择'
					this.upLoading = false
					this.video = data.path
					this.videoMd5 = data.md5
					console.log(data)
				})
			},			
			onFileChange2($event){
				this.loadingText1 = '上传中...'
				this.upLoading1 = true
				this.fileUpload($event, data =>{
					this.loadingText1 = '从本机选择'
					this.upLoading1 = false
					this.voice = data.path
					this.voiceMd5 = data.md5
				})
			},
			fileUpload($event,callBack){
				var file = $event.target.files[0]
				var oMyForm = new FormData()
				oMyForm.append("upload", file)
				var reader = new FileReader();
				let url = `${window.getIpwwws}/utils/files/upload.json?uid=${this.uid}&token=${this.token}`				
				axios.post(url,oMyForm).then( res => {
					let data = res.data
					if(data.code === 200){
						callBack(data.data)
					}
					if(data.code === 404){
						this.$message({message:'上传失败',type:'error'})
					}
				})


			},
			//新建分组
			createGroup(){
				let url = '/platform/read/addgroup.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id
				if(!this.groupName){
					return
				}
				this.$axiosPost(url,{title:this.groupName},true).then( res => {
					if(res.code === 200){
						this.showAdd = false
						this.getGroup()
						this.$message({message:'新建成功',type:'success'})
					}
					if(res.code === 404){
						this.$message({message:'新建失败',type:'error'})
					}
				})	
			},
			//获取分组
			getGroup(){
				let info = {
					uid     : this.uid,
					token   : this.token,
					shop_id : this.shop_id
				}
				this.$axiosGet('/platform/read/grouping.json',info,true).then(res => {
					if(res.code === 200){
						this.groupList = res.data
					}
					if(res.code === 404){
						this.groupList = []
					}
				})
			},
		},
		computed:{
			group(){
				let groupArr = []
				this.groupList.forEach( item => {
					groupArr.push({
						label : item.title,
						value : item.id
					})
				})
				return groupArr
			}
		}
	}
</script>
<style lang="less" scoped>
	// .add /deep/ .el-input,.el-textarea{
	// 	width: 400px;
	// }			
	.add /deep/ .ql-editor{
		min-height:200px;
	}	
	.form-con{
		position: relative;
		margin: 30px auto;
		width: 85%;
		.form-item{
			overflow: hidden;
			margin-bottom: 35px;
			.label{
				float: left;
				width: 100px;
				line-height: 40px;
			}
			.ipt-warrp{
				float: left;
				width: 650px;
			}
		}
		.btn-warrp{
			position: absolute;
			right: 88px;
		}
	}
</style>